<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>容器 - Container</title>
    <link rel="stylesheet" href="../assets/normalize.css" />
    <link rel="stylesheet" href="../assets/bootstrap.min.css" />
    <link rel="stylesheet" href="../assets/common.css" />
  </head>
  <body>
    <h1 class="subject-title">
      容器是Bootstrap的一个基本构建模块，用于在给定设备或视口中包含、填充和对齐您的内容。
    </h1>

    <section class="section-area">
      <h1 class="area-title">默认容器</h1>
      <h2>
        我们的默认.container类是一个响应式的固定宽度容器，这意味着它的最大宽度在每个断点都会改变。
      </h2>
      <div class="container" style="background-color: burlywood">
        <h1>Container</h1>
        <p>这是一个容器</p>
      </div>
    </section>

    <section class="section-area">
      <h1 class="area-title">响应式容器</h1>
      <h2>
        响应式容器允许您指定一个类，在达到指定断点之前为100%宽，之后我们会为每个更高的断点应用最大宽度。例如，.container-sm开始时为100%宽，直到达到sm断点，之后它将随着md、lg、xl和xxl一起放大。
      </h2>
      <div class="container-sm" style="background-color: lightcoral">
        100% wide until small breakpoint
      </div>
      <div class="container-md" style="background-color: lightblue">
        100% wide until medium breakpoint
      </div>
      <div class="container-lg" style="background-color: lightgreen">
        100% wide until large breakpoint
      </div>
      <div class="container-xl" style="background-color: lightyellow">
        100% wide until extra large breakpoint
      </div>
      <div class="container-xxl" style="background-color: lightpink">
        100% wide until extra extra large breakpoint
      </div>
    </section>

    <section class="section-area">
      <h1 class="area-title">流体容器</h1>
      <h2>使用 .container-fluid 作为一个全宽度容器，跨越整个视口的宽度。</h2>
      <div class="container-fluid" style="background-color: coral">
        <h1>Container-fluid</h1>
        <p>这是一个全屏容器</p>
      </div>
    </section>
  </body>
</html>
